<template>
  <div class="index">
    <div class="drama_wrap">
      <div class="drama_wrap_bg">
        <div class="drama_wrap_top_title">
          制作技艺
        </div>
      </div>
      <div class="skill_wrap">
        <div class="skill_wrap_bg">
          <div class="skill_list">
            <div class="skill_item">
              <div class="skill_item_pd">
                <img src="../../assets/images/large.png" alt="">
                <div class="right">
                  <div class="title">制作技艺名称</div>
                  <div class="content">简介:文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
                </div>
              </div>
            </div>
            <div class="skill_item">
              <div class="skill_item_pd">
                <img src="../../assets/images/large.png" alt="">
                <div class="right">
                  <div class="title">制作技艺名称</div>
                  <div class="content">简介:文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
                </div>
              </div>
            </div>
            <div class="skill_item">
              <div class="skill_item_pd">
                <img src="../../assets/images/large.png" alt="">
                <div class="right">
                  <div class="title">制作技艺名称</div>
                  <div class="content">简介:文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
                </div>
              </div>
            </div>
            <div class="skill_item">
              <div class="skill_item_pd">
                <img src="../../assets/images/large.png" alt="">
                <div class="right">
                  <div class="title">制作技艺名称</div>
                  <div class="content">简介:文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="more">更多</div>
      <div class="video_wrap">
        <div class="video_wrap_bg">
          <div class="video_wrap_title">
            制作技艺
          </div>
        </div>
        <div class="video_list_bg">
          <div class="video_list_wrap">
            <div class="video_list">
              <div class="video_list_item">
                <div class="play">
                  <img src="../../assets/images/large.png" alt="">
                  <i></i>
                </div>
                <div class="name">视频名称</div>
              </div>
              <div class="video_list_item">
                <div class="play">
                  <img src="../../assets/images/large.png" alt="">
                  <i></i>
                </div>
                <div class="name">视频名称</div>
              </div>
              <div class="video_list_item">
                <div class="play">
                  <img src="../../assets/images/large.png" alt="">
                  <i></i>
                </div>
                <div class="name">视频名称</div>
              </div>
              <div class="video_list_item">
                <div class="play">
                  <img src="../../assets/images/large.png" alt="">
                  <i></i>
                </div>
                <div class="name">视频名称</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <footer>
        <div>浙江省非物质文化遗产保护中心</div>
        <div>（浙江省非物质文化遗产馆）</div>
      </footer>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);
export default {
  name: '',
  data() {
    return {
      videoList: [
        {
          url: require('../../assets/images/large.png'),
          name: '戏剧名称11'
        },
        {
          url: require('../../assets/images/ship.png'),
          name: '戏剧名称22'
        },
      ],
      index: 0,
    };
  },
  created() {

  },
  mounted() {

  },
  methods: {
    onChange(index) {
      // console.log('当前 Swipe 索引：' + index);
      this.index = index
    },
    changeSwipe(type) {
      console.log('type==', type);
      if (type == 'up') {
        this.index -= 1;
      } else if (type == 'down') {
        this.index += 1;
      }
      this.$refs.swiper.swipeTo(this.index);
    },
  },
}
</script>
<style scoped lang="scss">
.index {
  width: 100%;
  height: 126.5rem;
  background: url('../../assets/images/zlyc_bg.png') no-repeat;
  background-size: 100% 100%;

  .drama_wrap {
    padding-top: 39.375rem;

    .drama_wrap_bg {
      width: 17.125rem;
      height: 2.375rem;
      background: url('../../assets/images/zlyc_1.png') no-repeat;
      background-size: 100% 100%;
      margin: 0 auto;

      .drama_wrap_top_title {
        font-size: 1.25rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 2.1875rem;
        letter-spacing: .0625rem;
        -webkit-text-stroke: .0625rem #000000;
        text-stroke: .0625rem #000000;
        text-align: center;
      }
    }

    .skill_wrap {
      margin-top: 2.5rem;

      .skill_wrap_bg {
        width: 22.125rem;
        height: 37.8125rem;
        background: url('../../assets/images/zlyc_2.png') no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;

        .skill_list {
          padding-top: 1.125rem;

          .skill_item {
            width: 20.6875rem;
            height: 8.6875rem;
            background: url('../../assets/images/zlyc_4.png') no-repeat;
            background-size: 100% 100%;
            margin: 0 auto;
            border: 1px dashed #7e919a;
            margin-bottom: .0625rem;
            position: relative;

            .skill_item_pd {
              display: flex;
              position: absolute;
              top: 50%;
              left: 50%;
              -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
              width: 88%;

              img {
                width: 7.5rem;
                height: 6.25rem;
                border-radius: .25rem;
              }

              .right {
                // width: calc(100% - 8.5625rem);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding-left: 1rem;
                margin: .3125rem 0 .3125rem;

                .title {
                  font-size: 1rem;
                  font-family: PingFangSC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #333333;
                  line-height: 1.5rem;
                }

                .content {
                  font-size: .75rem;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #666666;
                  height: 2.25rem;
                  line-height: 1.125rem;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 2;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                }
              }
            }

          }
        }
      }
    }

    .more {
      width: 6.5rem;
      height: 1.75rem;
      border-radius: 212px;
      border: 1px solid #fff;
      font-size: .875rem;
      font-family: AppleSystemUIFont;
      color: #fff;
      line-height: 1.75rem;
      margin: 0 auto;
      margin-top: 1.625rem;
      text-align: center;
    }

    .video_wrap {
      margin-top: 2.1875rem;

      .video_wrap_bg {
        width: 17.125rem;
        height: 2.375rem;
        background: url('../../assets/images/zlyc_1.png') no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;

        .video_wrap_title {
          font-size: 1.25rem;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          line-height: 2.1875rem;
          letter-spacing: .0625rem;
          -webkit-text-stroke: .0625rem #000000;
          text-stroke: .0625rem #000000;
          text-align: center;
        }
      }

      .video_list_bg {
        width: 22.125rem;
        height: 20.3125rem;
        background: url('../../assets/images/zlyc_3.png') no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
        margin-top: 1.1875rem;
        position: relative;

        .video_list_wrap {
          padding-top: 1.4375rem;

          .video_list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 0 1.5625rem;

            .video_list_item {
              .play {
                position: relative;
                width: 9.0625rem;
                height: 6.8125rem;

                img {
                  width: 9.0625rem;
                  height: 6.8125rem;
                  border-radius: .25rem;
                  display: block;
                }

                i {
                  width: 30px;
                  height: 30px;
                  background: url('../../assets/images/play.png') no-repeat;
                  background-size: 100% 100%;
                  display: block;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
                }
              }

              .name {
                font-size: .75rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #3D3D3D;
                line-height: 1.125rem;
                padding-left: .25rem;
                padding: .3125rem 0;
              }
            }
          }
        }
      }
    }

    footer {
      font-size: .75rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 1.4375rem;
      padding-top: 8.125rem;
      text-align: center;
    }
  }
}
</style>